<template>
    <Huangheader></Huangheader>
  <div class="Huang_card">
    <div class="card-container">
      
      <!-- Carousel -->
      <div
        class="image-carousel"
        v-if="data"
        @touchstart="onTouchStart"
        @touchmove="onTouchMove"
        @touchend="onTouchEnd"
        @wheel.prevent="onWheel"
      >
        <div
          class="carousel-track"
          :style="{ transform: `translateX(-${currentImageIndex * 100}%)` }"
        >
          <img
            v-for="(img, index) in slides"
            :key="index"
            :src="img"
            :alt="data.title"
            class="main-image"
          />
        </div>
        <div class="indicators">
          <span
            v-for="(img, index) in slides"
            :key="index"
            :class="{ active: index === currentImageIndex }"
            @click="currentImageIndex = index"
          ></span>
        </div>
      </div>

      <!-- Right Content -->
      <div class="content scrollable" v-if="data">
        <h2 class="title">{{ data.title }}</h2>
        <p class="description">{{ data.description }}</p>

        <!-- Extra Info -->
        <div class="extra-info">
          <p>本作品采用原创风格设计，强调视觉冲击与细节刻画。图像表达了独特的情绪氛围，适合用于数字艺术展示或个人收藏。</p>
          <p>如您希望获取高清版本或授权使用，请联系作者获取更多信息。</p>
          <p>关键词：视觉艺术、数字绘画、原创作品、现代风格。</p>
          <p>发布日期：2025年5月。</p>
          <p>特别说明：当前展示图为低分辨率预览，原图可能略有色彩差异。</p>
        </div>

        <!-- 卡片信息 -->
        <div class="info-card">
          <h3 class="card-title">瑞虹天地月亮湾</h3>
          <p class="card-location">虹口区 · 临平路/和平公园</p>
          <p class="card-tips">📅 每天 10:00 - 22:00<br>✨ 免费拍照打卡地！</p>
        </div>

        <!-- 评论区 -->
        <div class="comment-section">
          <h4>评论 ({{ dummyComments.length }})</h4>
          <div class="comment" v-for="comment in dummyComments" :key="comment.id">
            <strong>{{ comment.user }}</strong>：{{ comment.text }}
            <div class="comment-time">{{ comment.time }}</div>
          </div>
        </div>

        <!-- 作者信息 -->
<div class="meta">
  <div class="author-info">
    <img :src="data.avatar" :alt="data.author" class="avatar" />
    <span class="author-name">{{ data.author }}</span>
    <button class="follow-btn" @click="followed = !followed">
      {{ followed ? '已关注' : '+ 关注' }}
    </button>
  </div>
  <div class="likes">
    <button class="like-btn" @click="toggleLike">
      <span :class="{ liked: liked }">❤️</span>
    </button>
    <span class="like-count">{{ likeCount }}</span>
  </div>
</div>
      </div>
    </div>
    <br>
  <div style="text-align: center;
  font-size: 24px;"> 相关内容
  </div>
  <HuangContent/>
  </div>
  <Huangback/>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import axios from 'axios'
import HuangContent from '@/components/HuangContent.vue'

const props = defineProps({
  id: {
    type: [String, Number],
    required: true
  }
})

const data = ref(null)
const slides = ref([])
const currentImageIndex = ref(0)
const liked = ref(false)
const likeCount = ref(0)
const followed = ref(false)

function toggleLike() {
  liked.value = !liked.value
  likeCount.value += liked.value ? 1 : -1
}
const dummyComments = ref([
  { id: 1, user: '杨懿涵', text: '这个地方值得二刷吗？', time: '5月25日 16:22' },
  { id: 2, user: 'kuluzp', text: '同问', time: '5月27日 09:52' },
  { id: 3, user: '小红', text: '这里超级适合拍照打卡！', time: '5月26日 12:10' }
])

const url = `Huanglist/${props.id}`

onMounted(async () => {
  try {
    const response = await axios.get(url)
    data.value = response.data
    slides.value = Array(5).fill(data.value.image)
  } catch (error) {
    console.error('Error fetching data:', error)
  }
})

let startX = 0
function onTouchStart(e) {
  startX = e.touches[0].clientX
}
function onTouchMove(e) {
  const endX = e.touches[0].clientX
  const diff = startX - endX
  if (Math.abs(diff) > 50) {
    if (diff > 0 && currentImageIndex.value < slides.value.length - 1) {
      currentImageIndex.value++
    } else if (diff < 0 && currentImageIndex.value > 0) {
      currentImageIndex.value--
    }
    startX = endX
  }
}

let lastWheelTime = 0
const wheelDelay = 300
function onWheel(e) {
  const now = Date.now()
  if (now - lastWheelTime < wheelDelay) return
  lastWheelTime = now
  const delta = e.deltaX || e.deltaY
  if (delta > 0 && currentImageIndex.value < slides.value.length - 1) {
    currentImageIndex.value++
  } else if (delta < 0 && currentImageIndex.value > 0) {
    currentImageIndex.value--
  }
}
</script>

<style scoped>
.Huang_card {
  width: 100%;
  max-width: 1050px;
  margin: 0 auto;
  padding: 20px;
  box-sizing: border-box;
  border: #f4f4f4 solid 30px;
}

.card-container {
  display: flex;
  gap: 20px;
}

.image-carousel {
  flex: 1;
  min-width: 300px;
  overflow: hidden;
  position: relative;
}

.carousel-track {
  display: flex;
  transition: transform 0.3s ease;
}

.main-image {
  width: 100%;
  height: auto;
  border-radius: 8px;
  object-fit: cover;
  flex-shrink: 0;
}

.indicators {
  position: absolute;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 6px;
}

.indicators span {
  width: 8px;
  height: 8px;
  background-color: #ccc;
  border-radius: 50%;
  cursor: pointer;
}

.indicators span.active {
  background-color: #333;
}

.content.scrollable {
  flex: 1;
  max-height: 600px;
  overflow-y: auto;
  padding-right: 10px;
  scroll-behavior: smooth;
  display: flex;
  flex-direction: column;
}

.title {
  font-size: 1.5rem;
  margin-bottom: 10px;
  color: #333;
}

.description {
  font-size: 1rem;
  color: #666;
  margin-bottom: 15px;
  line-height: 1.4;
}

.extra-info {
  font-size: 0.9rem;
  color: #888;
  margin-top: 10px;
  line-height: 1.6;
  background-color: #f9f9f9;
  padding: 12px;
  border-radius: 6px;
}

/* 卡片样式 */
.info-card {
  background-color: #fff7f0;
  padding: 14px;
  border-radius: 10px;
  margin: 20px 0;
  font-size: 0.95rem;
  line-height: 1.5;
  color: #444;
  border: 1px solid #ffe3c5;
}

.card-title {
  font-size: 1.1rem;
  font-weight: bold;
  margin-bottom: 6px;
}

.card-location,
.card-tips {
  font-size: 0.9rem;
  color: #666;
}

/* 评论区样式 */
.comment-section {
  margin-top: 20px;
}

.comment-section h4 {
  margin-bottom: 10px;
  font-size: 1rem;
}

.comment {
  background-color: #f3f3f3;
  padding: 8px 12px;
  border-radius: 6px;
  margin-bottom: 8px;
  font-size: 0.9rem;
}

.comment-time {
  font-size: 0.75rem;
  color: #888;
  margin-top: 4px;
}

/* 作者 & 点赞 */
.meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: auto;
}

.author-info {
  display: flex;
  align-items: center;
  gap: 8px;
}

.avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
}

.author-name {
  font-size: 0.9rem;
  color: #333;
}
.meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: auto;
  margin-bottom: 10px;
}

.author-info {
  display: flex;
  align-items: center;
  gap: 8px;
}
.likes {
  display: flex;
  align-items: center;
  gap: 4px;
}

.like-count {
  font-size: 0.9rem;
  color: #666;
  
}
.like-btn {
  border: none;background-color: #fff;
}
.follow-btn {
  padding: 4px 12px;
  background-color: #ff7a00; /* 橙色 */
  color: white;
  border: none;
  border-radius: 999px; /* 胶囊效果 */
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.follow-btn:hover {
  background-color: #e66a00;
}
@media (max-width: 768px) {
  .card-container {
    flex-direction: column;
  }

  .image-carousel {
    min-width: 100%;
  }
}
</style>
